<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="lib/bootstrap-3.3.7.css" rel="stylesheet"/>
    <script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">

    <cmt-box @func="loadComments"></cmt-box>

    <ul class="list-group">
        <li class="list-group-item" v-for="item in list" :key="item.id">
            <span class="badge">评论人：{{item.user}}</span>
            {{item.content}}
        </li>
    </ul>
</div>

<template id="tpl">
    <div>
        <div class="form-group">
            <label>评论人：</label>
            <input type="text" class="form-control" v-model="user">
        </div>
        <div class="form-group">
            <label>评论内容：</label>
            <textarea class="form-control" v-model="content"></textarea>
        </div>
        <input type="button" class="btn btn-primary" @click="post" value="发表评论"/>
    </div>
</template>
<script>
    var contentBox = {
        template:'#tpl',
        data:function(){
          return{
              user:'',
              content:''
          }
        },
        methods:{
            /*
             localStorage的局限
             1、浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性
             2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换
             方法：
             localStorage.getItem(key):获取指定key本地存储的值
             localStorage.setItem(key,value)：将value存储到key字段
             localStorage.removeItem(key):删除指定key本地存储的值

             json.stringfy()将对象、数组转换成字符串；json.parse()将字符串转成json对象
             */


            post:function () {
                var comment = {id:Date.now(),user:this.user,content :this.content};
                //从localStorage获取所有的评论
                var list=JSON.parse(localStorage.getItem('cmts') || '[]');
                //存入的数据从前面插入
                list.unshift(comment);
                //重新保存最新的  评论数据
                localStorage.setItem('cmts',JSON.stringify(list));
                this.user=this.content='';
//                当点发表评论时下面最新评论就出现，类似于刷新
                this.$emit('func')
            }
        }
    }
   var vm = new Vue({
       el:'#app',
       data:{
           list:[
               {id:Date.now(), user:'李白' , content:'劝君更尽一杯酒'},
               {id:Date.now(), user:'杜甫' , content:'哈哈哈，现代真好呀'},
               {id:Date.now(), user:'汪伦' , content:'春江水暖鸭先知'}
           ]
       },
       created:function () {
          this.loadComments()
       },
       methods:{
           loadComments:function () {
               var list=JSON.parse(localStorage.getItem('cmts') || '[]');
               this.list = list;
           }

    },
       components:{
           'cmt-box':contentBox
       }

   })


</script>
</body>
</html>